<template>
	<view class="page">
		<!-- 售后订单列表 -->
		<view class="service-list">
			<!-- 订单项 -->
			<view class="service-item" v-for="item in pageData.data" :key="item.id">
				<view class="order-header">
					<text class="order-number">订单号：{{ item.orderNumber || '4186283277' }}</text>
				</view>

				<view class="product-section">
					<image class="product-image" :src="item.productImage || '/static/svg/matcha-cake.svg'"></image>
					<view class="product-info">
						<text class="product-name">{{ item.productName || '艾丽苏抹茶蛋糕早点低糖健康' }}</text>
						<text class="product-spec">{{ item.productSpec || '实惠装' }}</text>
						<view class="product-price-quantity">
							<text class="product-price">¥{{ item.price || '136' }}</text>
							<text class="product-quantity">×{{ item.quantity || '1' }}</text>
						</view>
					</view>
					<view class="group-tag">{{ item.groupSize || '3' }}人团</view>
				</view>

				<view class="service-status return-pending">
					<text class="status-text">{{ item.serviceStatus || '退货退款' }}</text>
				</view>

				<view class="action-section">
					<view class="detail-btn" @click="viewDetail(item.orderNumber || '4186283277')">查看详情</view>
				</view>
			</view>
		</view>

		<!-- 加载状态 -->
		<view class="load-status" v-if="pageData.data && pageData.data.length > 0">
			<view v-if="status === 'loading'" class="loading">
				<text class="loading-text">加载中...</text>
			</view>
			<view v-else-if="status === 'noMore'" class="no-more">
				<text class="no-more-text">没有更多数据了</text>
			</view>
		</view>

		<!-- 空状态 -->
		<view v-if="!loading && (!pageData.data || pageData.data.length === 0)" class="empty-state">
			<text class="empty-text">暂无售后订单</text>
		</view>

		<!-- 全局加载状态 -->
		<view v-if="loading && (!pageData.data || pageData.data.length === 0)" class="global-loading">
			<text class="loading-text">加载中...</text>
		</view>
	</view>
</template>

<script setup>
import {ref} from 'vue'
import {usePageData} from "../../common/usePageData";

// 初始化搜索参数
const searchParams = ref({
  page: 1,
	size: 10
});

// 使用 usePage 获取分页数据和状态
const { pageData, status, initData } = usePageData('order_return_list', searchParams);

// 本地加载状态
const loading = ref(false);

// 查看详情
const viewDetail = (orderNumber) => {
	// 可以跳转到详情页面
	uni.navigateTo({
		url: `/pages/my/service_view?id=${orderNumber}`
	})
}
</script>

<style>
.page {
	background-color: #f5f5f5;
	min-height: 100vh;
	padding: 16rpx;
}

.service-list {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.service-item {
	background-color: #ffffff;
	border-radius: 8rpx;
	padding: 24rpx;
	margin: 0 8rpx;
}

.order-header {
	margin-bottom: 16rpx;
}

.order-number {
	font-size: 26rpx;
	color: #666666;
	font-weight: 400;
}

.product-section {
	display: flex;
	align-items: flex-start;
	position: relative;
	margin-bottom: 16rpx;
}

.product-image {
	width: 140rpx;
	height: 140rpx;
	border-radius: 8rpx;
	margin-right: 16rpx;
	flex-shrink: 0;
}

.product-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 140rpx;
}

.product-name {
	font-size: 28rpx;
	font-weight: 500;
	color: #333333;
	margin-bottom: 8rpx;
	line-height: 1.3;
}

.product-spec {
	font-size: 24rpx;
	color: #999999;
	margin-bottom: auto;
}

.product-price-quantity {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: auto;
}

.product-price {
	font-size: 30rpx;
	font-weight: 600;
	color: #FF5722;
}

.product-quantity {
	font-size: 26rpx;
	color: #999999;
}

.group-tag {
	position: absolute;
	top: 0;
	right: 0;
	background-color: #FF5722;
	color: white;
	font-size: 22rpx;
	padding: 4rpx 12rpx;
	border-radius: 0 8rpx 0 8rpx;
	font-weight: 500;
}

.service-status {
	padding: 12rpx 20rpx;
	border-radius: 6rpx;
	margin-bottom: 16rpx;
	text-align: left;
	color: #FF6633;
}


.status-text {
	font-size: 26rpx;
	font-weight: 500;
}

.action-section {
	display: flex;
	justify-content: flex-end;
}

.detail-btn {
	background-color: transparent;
	color: #FF5722;
	border: 1rpx solid #FF5722;
	border-radius: 20rpx;
	padding: 10rpx 24rpx;
	font-size: 26rpx;
	font-weight: 400;
}

.detail-btn:active {
	background-color: #FF5722;
	color: white;
}

/* 加载状态样式 */
.load-status {
	padding: 32rpx;
	text-align: center;
}

.loading, .no-more {
	display: flex;
	justify-content: center;
	align-items: center;
}

.loading-text {
	font-size: 26rpx;
	color: #999999;
}

.no-more-text {
	font-size: 26rpx;
	color: #cccccc;
}

/* 空状态样式 */
.empty-state {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 120rpx 32rpx;
	text-align: center;
}

.empty-text {
	font-size: 28rpx;
	color: #999999;
}

/* 全局加载状态样式 */
.global-loading {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 120rpx 32rpx;
	text-align: center;
}
</style>
